<template>
	<div>
		<!-- 表单 -->
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />
			<div>
				<el-button type="primary" @click="add">{{ $t('public.add') }} API</el-button>
			</div>
		</div>
		<!-- 表格 -->
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="auth_name" :label="$t('system.api.userName')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.auth_name || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="auth_password" :label="$t('public.password')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.auth_password || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="white_list" :label="$t('system.api.whitelist')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.white_list || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="callback_url" :label="$t('system.api.push')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.callback_url || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="creator_nickname" :label="$t('source.creater')" show-overflow-tooltip />
				<el-table-column prop="create_time" :label="$t('date.createTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')" width="220">
					<template #default="scope">
						<el-button size="small" type="primary" @click="modify(scope.row)">{{ $t('public.modify')
							}}</el-button>
						<el-button v-prmis="'config_api_del'" size="small" type="danger" @click="del(scope.row.id)">{{
							$t('public.del') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<PageNum :total="data.total" :page="data.apiInfo" @exposeData="current" @fraction="fraction" />
		</div>
		<!-- 添加弹窗 -->
		<el-dialog v-model="data.vodesing" width="30%">
			<div class="flex justify-center">
				<el-image class="max-w-60" :src="data.img_url" fit="fill" />
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { getApi, getaddDel } from '@/api/system-api';
import { useRouter } from "vue-router";
const router = useRouter()
let data = reactive({
	mtloading: false, // 加载
	vodesing: false, // 弹窗
	lookup: [ // 筛选栏
		{ title: $t('eventlog.user.userName'), type: 'input', value: '', key: 'auth_name' },
		{ title: $t('system.api.whitelist'), type: 'input', value: '', key: 'white_list' }
	],
	aolist: [],
	apiInfo: { // 筛选数据
		auth_name: '',
		white_list: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	img_url: '', // 二维码链接
})

// 查询
let getlist = () => {
	data.mtloading = true
	getApi(data.apiInfo).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.apiInfo[key] = e[key]
	}
	data.apiInfo.page = 1
	data.apiInfo.pageNum = 15
	getlist()
}

// 添加
let add = () => {
	let query = {
		typePage: 'add'
	}
	router.push({ path: '/system/api/details/index', query: query })
}

// 修改
let modify = (e) => {
	let query = {
		typePage: 'update',
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/system/api/details/index', query: query })
}

// 删除
let del = (e) => {
	ElMessageBox.confirm($t('message.delDatas'))
		.then(res => {
			getaddDel({ id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})

		}).catch(err => {
			console.log('取消')
		})
}

// 页数回调
let current = (e) => {
	data.apiInfo.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.apiInfo.pageNum = e
	getlist()
}
getlist()

</script>